<template>
  <el-container class="home_container">
    <!--  头部  -->
    <el-header>
      <!--  主题  -->
      <div class="header_box">
        <img src="../assets/logo.png" alt="">
        <h1>电商后台管理系统</h1>
      </div>
      <!--  退出  -->
      <button @click="comeBack">退出</button>
    </el-header>
    <el-container>
      <!--  左侧  -->
      <el-aside :width="isCollapse?'64px':'200px'">
        <div class="collapse_btn" @click="toggleBtn">|||</div>
        <el-menu :default-active="defaultActive" router :collapse="isCollapse" :collapse-transition="false"
                 unique-opened
                 style="border: 0;"
                 background-color="#333744" text-color="#fff" active-text-color="#409eff">
          <el-submenu v-for="item in menuList" :key="item.id" :index="item.id + ''">

            <template slot="title">
              <!--  动态绑定类名  -->
              <i :class="itemId[item.id]"></i>
              <span style="margin-right: 50px">{{item.authName}}</span>
            </template>
            <!--  二级菜单  -->
            <el-menu-item @click="saveActiveState('/' + sceItem.path + '')" v-for="sceItem in item.children"
                          :key="sceItem.id"
                          :index="'/' + sceItem.path + ''">
              <i class="el-icon-menu"></i>
              <span>{{sceItem.authName}}</span>
            </el-menu-item>
          </el-submenu>
        </el-menu>
      </el-aside>
      <!--  内容  -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
  export default {
    name: "Home",
    data() {
      return {
        /*  保存被激活链接地址  */
        defaultActive: '',
        /*  存储表单数据  */
        menuList: [],
        isCollapse: false,
        /* 利用id值存储类名 */
        itemId: {
          "125": "el-icon-s-custom",
          "103": "el-icon-help",
          "101": "el-icon-s-goods",
          "102": "el-icon-edit-outline",
          "145": "el-icon-data-line"
        }
      }
    },
    /*  生命周期函数*/
    created() {
      this.getMenuList();
      this.defaultActive = window.sessionStorage.getItem('activePathRote');
    },
    methods: {
      /* 保存链接的激活状态（保存激活路由）  */
      saveActiveState(activePath) {
        window.sessionStorage.setItem('activePathRote', activePath);
        this.defaultActive = activePath;
      },
      /*  菜单栏折叠与展开  */
      toggleBtn() {
        this.isCollapse = !this.isCollapse;
      },
      /*  清除token，编程式跳转到login */
      comeBack() {
        window.sessionStorage.clear();
        this.$router.push('/login');
      },
      /*  获取菜单数据  */
      async getMenuList() {
        const {data: res} = await this.$http.get('menus');
        if (res.meta.status === 200) {
          this.menuList = res.data;
        } else {
          this.$message.error("菜单获取失败")
        }
      }
    }
  }
</script>

<style type="less" scoped>
  .home_container {
    height: 100%;
  }

  /*    头部    */
  .el-header {
    background-color: #373d41;
    display: flex;
    justify-content: space-between;
    align-items: center;

    button {
      height: 25px;
    }
  }

  .header_box {
    width: 280px;
  }

  .header_box > img {
    width: 60px;
    float: left;
  }

  .header_box > h1 {
    color: white;
  }

  /*  左侧  */
  .el-aside {
    background-color: #333744;
  }

  .collapse_btn {
    background-color: #4a5064;
    font-size: 10px;
    line-height: 24px;
    color: #fff;
    cursor: pointer;
    letter-spacing: 0.2em;
  }

  /*  中间  */
  .el-main {
    background-color: #E9EEF3;
  }

</style>
